<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Alert show-icon style="padding-right: 8px;">
      相关API <a target="_blank" href="http://pagenow.cn/pages/e49e56/">http://pagenow.cn/pages/e49e56/</a>
    </Alert>

    <!--    <Button long type="primary" @click="dynamicCustomComponentModalVisible = true">窗口化编辑</Button>-->

    <Collapse value="0">
      <Panel>
        组件编辑
        <div slot="content">
          <ButtonGroup style="width: 100%;">
            <Button type="primary" style="width: 50%;" @click="openDynamicCustomCompTableDrawer('share')">
              组件共享库
            </Button>
            <Button type="primary" style="width: 50%;" @click="openDynamicCustomCompTableDrawer('my')">
              我的组件库
            </Button>
          </ButtonGroup>
          <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
            <TabPane name="template_tab" tab="main_tabs" label="模板">
              <CodeEditor v-model="template" :mode="'html'" :height="475" @on-submit-change="onSubmitChangeHandler"></CodeEditor>
            </TabPane>
            <TabPane name="js_tab" tab="main_tabs" label="脚本">
              <Alert show-icon style="padding-right: 10px; text-align: justify;">
                <p>1、代码编辑器中会根据ES标准对代码进行语法校验，一些警告类的校验提示可以忽略。</p>
              </Alert>
              <CodeEditor v-model="js" :mode="'js'" :height="400" @on-submit-change="onSubmitChangeHandler"></CodeEditor>
            </TabPane>
            <TabPane name="css_tab" tab="main_tabs" label="样式">
              <Alert show-icon style="padding-right: 10px; text-align: justify;">
                <p>1、如果发现配置的样式属性不生效，请尝试添加【!important】属性提高属性的优先级。</p>
              </Alert>
              <CodeEditor v-model="css" :mode="'css'" :height="400" @on-submit-change="onSubmitChangeHandler"></CodeEditor>
            </TabPane>
          </Tabs>
        </div>
      </Panel>
      <Panel>
        组件共享与持久化
        <div slot="content">
          <Form :label-width="120">
            <FormItem label="组件ID">
              <Input size="small" v-model="shareCustomCompId" disabled placeholder="持久化后自动生成"/>
            </FormItem>
            <FormItem label="作者">
              <Input size="small" :value="shareCustomCompUploaderUsername" disabled placeholder="由系统自动生成，且无法更改"/>
            </FormItem>
            <FormItem label="组件名称">
              <Input size="small" v-model="shareCustomCompName" placeholder="组件名称必填"/>
            </FormItem>
            <FormItemPanel title="组件缩略图">
              <Button long size="small" type="primary" @click="screenShot" :loading="screenShotLoading">系统自动截取</Button>
              <div class="m-b-5px"></div>
              <UploadImageButton v-model="shareCustomCompThumbnail"
                                 :page-id="'shareCustomCompThumbnail'"></UploadImageButton>
              <Input size="small" v-model="shareCustomCompThumbnail" disabled placeholder="缩略图相对路径"/>
            </FormItemPanel>
            <FormItem label="是否加入组件共享库">
              <Tooltip :max-width="150" content="加入组件共享库后，平台内所有用于均可以使用并载入您编辑的自定义组件" placement="top">
                <i-switch size="small" v-model="shareCustomCompIsShare" true-value="1" false-value="0"></i-switch>
              </Tooltip>
            </FormItem>
            <FormItem>
              <Tooltip :max-width="150" content="首次持久化后，请记得保存当前页面，否则页面关闭后下次将无法" placement="top">
                <Button size="small" type="primary" @click="saveShareCustomComp">持久化组件</Button>
              </Tooltip>
            </FormItem>
          </Form>

        </div>
      </Panel>
    </Collapse>

    <DynamicCustomCompTableDrawer ref="DynamicCustomCompTableDrawer" @loadCompSTC="loadCompSTCHandler"></DynamicCustomCompTableDrawer>

    <!--    <DynamicCustomComponentModal :show="dynamicCustomComponentModalVisible" :js="js" :template="template" :css="css"></DynamicCustomComponentModal>-->

  </div>
</template>

<script>

import html2canvas from 'html2canvas'

import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

import {createHelpers} from 'vuex-map-fields';

const {mapFields} = createHelpers({
  getterType: 'designer/getLayoutItem',
  mutationType: 'designer/updateLayoutItem',
});

export default {
  name: 'DynamicCustomComponentForm',
  mixins: [FuncCompFormMixin],
  data() {
    return {
      mainTabsValue: 'template_tab',
      dynamicCustomComponentModalVisible: false,
      screenShotLoading: false
    }
  },
  mounted() {
    this.loadShareCustomComp()
  },
  methods: {
    loadShareCustomComp() {
      if (this.shareCustomCompId) {
        this.$PnApi.ShareCustomCompApi.getShareCustomCompById(this.shareCustomCompId).then(result => {
          this.shareCustomCompId = result.data.payload.id
          this.shareCustomCompName = result.data.payload.name
          this.shareCustomCompThumbnail = result.data.payload.thumbnail
          this.shareCustomCompIsShare = result.data.payload.is_share
          this.shareCustomCompUploaderUsername = result.data.payload.uploader_username
        })
      }
    },
    openDynamicCustomCompTableDrawer(type) {
        this.$refs.DynamicCustomCompTableDrawer.init(type)
    },
    onSubmitChangeHandler() {
      if (this.shareCustomCompId) {
        this.saveShareCustomComp()
      }
    },
    saveShareCustomComp() {
      let func = () => {
        let shareCustomComp = {
          id: this.shareCustomCompId,
          name: this.shareCustomCompName,
          thumbnail: this.shareCustomCompThumbnail,
          is_share: this.shareCustomCompIsShare,
          script_code: this.js,
          template_code: this.template,
          style_code: this.css,
          uploader_username: this.shareCustomCompUploaderUsername
        }
        this.$PnApi.ShareCustomCompApi.saveShareCustomComp(shareCustomComp).then(result => {
          if (result.data.success) {
            this.shareCustomCompId = result.data.payload.id
            this.shareCustomCompUploaderUsername = result.data.payload.uploader_username
            this.$Message.success(result.data.message)
          } else {
            this.$Message.error(result.data.message)
          }
        })
      }
      if (!this.shareCustomCompId) {
        this.$Modal.confirm({
          title: '确认',
          content: '特别提醒：当前组件为首次持久化，确认持久化后，需要对页面进行保存，才可将组件与数据库中的持久化信息进行绑定',
          onOk: () => {
            func()
          }
        });
      }else {
        func()
      }
    },

    loadCompSTCHandler(scc) {
      this.shareCustomCompId = scc.id
      this.shareCustomCompName = scc.name
      this.shareCustomCompThumbnail = scc.thumbnail
      this.shareCustomCompIsShare = scc.is_share
      this.shareCustomCompUploaderUsername = scc.uploader_username
      this.js = scc.script_code
      this.template = scc.template_code
      this.css = scc.style_code

      this.$Message.success('载入成功')
      this.$refs.DynamicCustomCompTableDrawer.visible = false
    },

    screenShot() {
      this.screenShotLoading = true

      this.$PnUtil.systemScreenShot(this.id, 'shareCustomCompThumbnail', (result) => {
        if (result.data.success) {
          this.shareCustomCompThumbnail = '';
          this.shareCustomCompThumbnail = result.data.payload.relativePath;
          this.$Message.success('截取成功，请记得保存页面')
        }else {
          this.$Message.error('截取失败')
        }
        this.screenShotLoading = false
      }, (error) => {
        console.error(error);
        this.screenShotLoading = false
        this.$Message.error('截取失败')
      })
    }
  },
  computed: {
    ...mapFields({

      layoutItemId: 'id',

      shareCustomCompId: 'component.compConfigData.shareCustomCompId',
      shareCustomCompName: 'component.compConfigData.shareCustomCompName',
      shareCustomCompThumbnail: 'component.compConfigData.shareCustomCompThumbnail',
      shareCustomCompIsShare: 'component.compConfigData.shareCustomCompIsShare',
      shareCustomCompUploaderUsername: 'component.compConfigData.shareCustomCompUploaderUsername',
      js: 'component.compConfigData.sourceData.js',
      template: 'component.compConfigData.sourceData.template',
      css: 'component.compConfigData.sourceData.css',

    })
  }
}
</script>

<style scoped>

</style>
